<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Button Toggle Example</title>
</head>
<style>
    .option-btn {
    padding: 10px 20px;
    margin: 5px;
    background-color: #f4f4f4; 
    border: none;
    cursor: pointer;
}

.option-btn.active {
    background-color: #007bff; 
    color: white;
}
</style>
<body>
    <button class="option-btn" >按钮1</button>
    <button class="option-btn" >按钮2</button>
    <button class="option-btn" >按钮3</button>
    <button class="option-btn" >按钮4</button>
    <button class="option-btn" >按钮5</button>

</body>
<script>
    //获取所有按钮元素
    // getElementsByTagName:用于按照标签名称来查找 HTML 文档中的元素
    let btns = document.getElementsByTagName('button');
    //btns[i]得到的是类数组对象，使用btns[i]访问数组中的每个元素
    for (let i = 0;i<btns.length;i++){
        btns[i].onclick=function(){
            //清除按钮背景颜色
            for (let i=0;i<btns.length;i++){
                btns[i].style.backgroundColor='';
            }
            //设置背景颜色
            this.style.backgroundColor='green';
        }
    }
</script>
</html>